<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/jquery-1.8.2.min.js"></script>
    <script src="static/js/stomp.js"></script>
    <!--在src前加th: 在@{}里面写引入访问地址,注意:这里不用写static文件夹-->

</head>
<body>


<div class="msgBody">
    websocket的endPoint &ensp;&ensp;&ensp;<input style="font-size: 16px;width: 400px" type="text" id="endPoint" value="ws://127.0.0.1:8090/myws">
    <button type="button" id="createConnBtn" style="width:100px;height:30px;">建立连接</button>
</div>

<br>

<div>
    订阅的主题名字： &ensp;&ensp;&ensp;&ensp;<input style="font-size: 16px;width: 400px" type="text" id="topicInput" value="/groupAlarmQueue/001">
    <button type="button" id="setSubscribe" style="width:100px;height:30px;">建立订阅</button>
    <button type="button" id="unsubscribed" style="width:100px;height:30px;">取消订阅</button>
</div>
<div>
    该topic收到的数据：&ensp;
    <textarea  style="width: 400px;font-size: 16px" name="showMsg" id="showMsg" cols="30" rows="10"></textarea>
</div>
<br>


<div>
    MessageMapping: &ensp;&ensp;&ensp;<input style="font-size: 16px;width: 400px" type="text" id="requestUri" value="/nmsMessage/nms/heartbeat/12133"><br>
    消息： &ensp;&ensp;&ensp;<input style="font-size: 16px;width: 400px" type="text" id="msgContent" placeholder="消息内容" ><br>
    &ensp;&ensp;&ensp;<button type="button" id="send" onclick="sendMessage()" style="width:100px;height:30px;">发送信息</button>
</div>



</body>

<script type="text/javascript" th:inline="javascript">
    var stompClient = null;
    $("#createConnBtn").click(function () {
        //alert("111")
        // 拼接socket地址，例如："ws://127.0.0.1:9188/webSocket"
        var socketPath = $('#endPoint').val();
        var socket = new WebSocket(socketPath, 'auth-001'); // 连接SockJS的endpoint名称为"webSocket"
        console.log(socket);
        stompClient = Stomp.over(socket); // 使用STMOP子协议的WebSocket客户端
        console.log(stompClient);
        stompClient.connect({}, onConnected, onError);
    })

    $("#setSubscribe").click(function () {
       creatSubcribe()
    })

    $("#unsubscribed").click(function () {
        var topicName =$('#topicInput').val();
        stompClient.unsubscribe(topicName);
    })


    function onConnected() {
        alert("建立连接成功，可以开始订阅主题了")
    }

    function onError(e) {
        console.log("连接失败...")
        console.log(e)
    }

    function creatSubcribe() {
        var topicName = $('#topicInput').val();
        stompClient.subscribe(topicName, function (res) {
            var data = res.body;
            console.log(data)
            // var dataStr = JSON.parse(data)
            // console.log(dataStr)
            $("#showMsg").val(data)
        });

        // var groupId = Math.round(Math.random() * 30 + 10);
        // console.log("群组ID ========================= " + 35)
        // stompClient.subscribe('/topic/' + 35, function (res) {
        //     var data = res.body;
        //     var dataStr = JSON.parse(data)
        //     $("#groupInput").val(dataStr.msgData)
        // });
    }

    function sendMessage() {
        var requestUri = $('#requestUri').val();
        var msgContent = $('#msgContent').val();
        stompClient.send(requestUri, {}, JSON.stringify({'content': msgContent}));
    }


</script>
</html>
